<script setup lang="ts">
import { h } from 'vue'
import { NCard, NSpace, NButton, NIcon } from 'naive-ui'

interface Resource {
  title: string
  description: string
  url: string
  tags: string[]
}

const resources: Resource[] = [
  {
    title: 'Vue 3',
    description: 'Vue.js - 渐进式 JavaScript 框架',
    url: 'https://vuejs.org',
    tags: ['框架', '文档']
  },
  {
    title: 'VueUse',
    description: 'Vue Composition API 的实用工具集合',
    url: 'https://vueuse.org',
    tags: ['工具', '组合式API']
  },
  {
    title: 'Nuxt 3',
    description: '直观的 Vue 框架',
    // url: 'https://nuxt.com',
    url: 'https://nuxt.zhcndoc.com/',
    tags: ['框架', 'SSR']
  },
  {
    title: 'Tailwind CSS',
    description: '功能优先的 CSS 框架',
    url: 'https://tailwindcss.com',
    tags: ['CSS', '框架']
  },
  {
    title: 'Lodash',
    description: '现代 JavaScript 实用工具库',
    url: 'https://lodash.com',
    tags: ['工具库', 'JavaScript']
  },
  {
    title: 'Naive UI',
    description: 'Vue 3 组件库',
    url: 'https://www.naiveui.com',
    tags: ['UI', '组件库']
  },
  {
    title: 'Vite',
    description: '下一代前端构建工具',
    url: 'https://vitejs.dev',
    tags: ['构建工具', '开发工具']
  },
  {
    title: 'TypeScript',
    description: 'JavaScript 的超集',
    url: 'https://www.typescriptlang.org',
    tags: ['语言', '类型系统']
  },
  {
    title: 'Pinia',
    description: 'Vue 状态管理库',
    url: 'https://pinia.vuejs.org',
    tags: ['状态管理', 'Vue']
  },
  {
    title: 'Vue Router',
    description: 'Vue.js 的官方路由',
    url: 'https://router.vuejs.org',
    tags: ['路由', 'Vue']
  }
]

const openUrl = (url: string) => {
  window.open(url, '_blank')
}
</script>

<template>
  <div class="p-4 mx-auto max-w-7xl">
    <n-card>
      <template #header>
        <div class="text-2xl font-bold">前端资源导航</div>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
          精选前端开发常用网站和文档
        </p>
      </template>

      <n-space vertical size="large">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
          <n-card
            v-for="resource in resources"
            :key="resource.title"
            class="transition-shadow cursor-pointer group hover:shadow-lg"
            @click="openUrl(resource.url)"
          >
            <div class="flex items-start justify-between">
              <div>
                <h3 class="text-lg font-bold group-hover:text-blue-500">
                  {{ resource.title }}
                </h3>
                <p class="mt-1 text-gray-600 dark:text-gray-400">
                  {{ resource.description }}
                </p>
                <div class="flex flex-wrap gap-2 mt-2">
                  <n-button
                    v-for="tag in resource.tags"
                    :key="tag"
                    size="tiny"
                    quaternary
                  >
                    {{ tag }}
                  </n-button>
                </div>
              </div>
              <n-icon
                class="text-gray-400 group-hover:text-blue-500"
                :size="20"
              >
                <open-in-new />
              </n-icon>
            </div>
          </n-card>
        </div>
      </n-space>
    </n-card>
  </div>
</template> 